<template>
  <div class="wrap">
    <div class="title">
      <div>交易管理</div>
      <div></div>
      <div>我的訂單</div>
    </div>
    <div class="content">
      <div class="contenttop">
        <div>訂單號：{{list.orderNum}}</div>
        <div class="topimg" @click="goback"> 
          <img src="@/assets/xiaoyu.png" alt="">
          <div>返回</div>
        </div>
      </div>
      <div class="contentbottom">
        <div class="cancel">
          <div class="cancelleft" v-if="list.refundState == 1">提交申请</div>
          <div class="cancelleft" v-if="list.refundState == 2">等待審核</div>
          <div class="cancelleft" v-if="list.refundState == 3">退款成功</div>
          <!-- <div class="cancelleft">退款成功</div> -->
          <div class="cancelright">
            <div class="gotocancel">
              <img src="@/assets/ti.png" alt="">
              <div>提交申请</div>
            </div>
            <div class="yellow">..................</div>
            <div class="tocancel" v-if="list.refundState == 1">
              <img src="@/assets/back.png" alt="">
              <div>正在處理</div>
              <!-- <div>2019-10-23 </div>
              <div>14:30 </div> -->
            </div>
            <!-- <div class="tocancel1" >
              <img src="@/assets/zai1.png" alt="">
              <div>正在處理</div>
            </div> -->
             <div class="tocancel"  v-if="list.refundState > 1" >
              <img src="@/assets/back1.png" alt="">
              <div>正在處理</div>
            </div>
            <div class="yellow" :style="list.refundState != 3?'color:#CCCCCC':'color:#FF3140'">..................</div>
            <div class="tocancel">
              <img :src="list.refundState != 3?require('@/assets/tuhui.png'):require('@/assets/tu.png')" alt="">
              <div>完成</div>
            </div>
            <!-- <div class="tocancel1">
              <img src="@/assets/fail.png" alt="">
              <div>申請退款失敗</div>
            </div> -->
            <!-- <div class="tocancel1">
              <img src="@/assets/tu1.png" alt="">
              <div>申請退款成功</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="goods" >
      <div class="goodstop">
        <div>商品信息</div>
        <div>單價 </div>
        <div>數量 </div>
        <div>小計 </div>
        <!-- <div> 核銷碼</div> -->
      </div>
      <div class="goodsbottom" v-for="(item,index) in list.orderGoodsList" :key="index">
        <div class="bao">
          <img :src="item.picUrl" alt="">
          <div>{{item.goodsName}}</div>
        </div>
        <div> ${{item.price}}</div>
        <div>x{{item.number}} </div>
        <div>${{item.price * item.number}} </div>
      </div>
      <div class="reason">退款原因</div>
      <select v-model="tuiid" name="" id="" v-if="list.refundState == 1">
        <option v-for="(item,index) in list.causList" :key="index" :value="item.id">{{item.name}}</option>
        <!-- <option value="">不想要</option> -->
        <!-- <option value="">地址錯誤</option> -->
      </select> 
      <input type="text" v-model="tui" disabled v-if="list.refundState != 1">
      <div class="reasons">退款說明</div>
      <textarea name="" v-model="nav" placeholder="請輸入退款原因" v-if="list.refundState == 1"></textarea>
      <textarea name="" v-model="list.refundContent" disabled v-if="list.refundState != 1"></textarea>
      <div class="submit" @click="gosubmit" v-show="button" v-if="list.refundState == 1">
        <div>提交</div>
      </div>
    </div>
  </div>
</template>
<script>
// import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
// import {userInfo,updateUserInfo} from '@/api/user';
import {tuidel,refund} from '@/api/order';
import { getToken } from '@/utils/auth'
export default {
  data(){
    return{
      button:true,
      id:'',
      tuiid:"",
      tui:'',
      nav:'',
      list:{}
    }
  },
  mounted(){
    var id = this.$route.query.id
    this.id = id
     tuidel({userId:getToken(),orderId:id}).then(response => {
        console.log(response)
        if (response.errno == 0) {
          this.list=response.data
          if(this.list.refundState != 1){
            for(var i =0;i<this.list.causList.length;i++){
              var index = i
              if(this.list.causList[index].id == this.list.refundCause){
                this.tui = this.list.causList[i].name
                return
              }else{
                this.tui = ''
              }
            }
          }
        } else {
          this.$message({
              type: 'error',
              message: response.errmsg
          })
        }
      })
  },
  methods: {
   gosubmit(){
    //  this.button=false
    refund({userId:getToken(),orderId:this.id,refundCauseId:this.tuiid,refundContent:this.nav}).then(response =>{
         console.log(response)
         if(response.errno == 0){
           this.$router.push({
             path:'/purorder'
           })
         }
      })
    },
    goback(){
      this.$router.back(-1)
    },
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #F5F5F5;
    box-sizing: border-box;
    padding: 15px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background: #fff;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 100%;
    height: 250px;
    background: #FFFFFF;
    border-radius: 10px;
  }
  .contenttop{
    width: 92%;  
    display: flex; 
    padding:0 39px;
    align-items: center;  
    height: 60px;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .contenttop>div:nth-child(1){     
    display: flex; 
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .topimg{
    display: flex;
    height: 60px;
    align-items: center;
  }
  .topimg img{
      padding:0 5px;
      height: 12px;
  }
  .topimg div{    
    display: flex; 
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  } 
  .contentbottom{
    width: 100%;
    display: flex;
    height: 189px;
    align-items: center;
  }
  .cancel{
    width: 100%;
    margin: 0 auto;
    height: 120px;
    display: flex;
    align-items: center;
  }
  .cancelleft{
    width: 20%;
    font-size: 20px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FF3140;
    border-right:1px solid #E5E5E5;
  }
  .cancelright{
    width: 80%;
    display: flex;
  }
  .gotocancel{
    padding-left:18px;
    padding-top:8px;
    text-align: center;
  }
  .gotocancel>img:nth-child(1){
    width: 19px;
    padding-bottom:20px;
  }
  .gotocancel>div:nth-child(2){      
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    padding-bottom:5px;
    color: #343434;
  }
  .gotocancel>div:nth-child(3){
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #9A9A9A;
  }
  .gotocancel>div:nth-child(4){
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #9A9A9A;
  }
  .tocancel{
    padding-top:8px;
    text-align: center;
  }
  .tocancel img{
    width: 26px;
    padding-bottom:18px;
  }
  .tocancel div{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343434;
  }
  .tocancel1{
    text-align: center;
  }
  .tocancel1 img{
    width: 45px;
    padding-bottom:6px;
  }
  .tocancel1 div{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343434;
  }
  .yellow{ 
    color: #FF3140;
    padding-top:8px;
    letter-spacing: 9px;
  }
  .waitpay{
    padding-top:50px;
    text-align: center;
  }
  .waitpaytop{
    text-align: center;
    height: 30px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #E4393C;
  }
  .waitpaybottom{
    display: flex;
    height: 20px;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .waitpaybottom>div:nth-child(1){
      letter-spacing: 6px;
      justify-content: center;
      text-align: center;
      color: #9A9A9A;
  }
  .waitpaybottom>img:nth-child(2){
      margin-top:10px;
      margin-left:5px;
      margin-right:7px;
      width: 8px;
      height: 11px;
  }
  .waitpaybottom>div:nth-child(3){
      letter-spacing: 6px;
      color: #9A9A9A;
  }
  .waitpaybottoms{
    display: flex;
    height: 20px;
    padding-top:30px;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .waitpaybottoms>div:nth-child(1){
      letter-spacing: 6px;
      justify-content: center;
      text-align: center;
      color: #9A9A9A;
  }
  .waitpaybottoms>img:nth-child(2){
      margin-top:10px;
      margin-left:5px;
      margin-right:7px;
      width: 8px;
      height: 11px;
  }
  .waitpaybottoms>div:nth-child(3){
      letter-spacing:6px;
      color: #9A9A9A;
  }
 .togoods{
    width: 100%;  
    height: 100px;
    background: #FFFFFF;
    border-radius: 10px;
  }
.goods{
    margin-top:20px;
    width: 100%;  
    /* height: 450px; */
    background: #FFFFFF;
    border-radius: 10px;
  }
  .goodstop{
    width: 96%;  
    display: flex; 
    padding:0 20px;
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .goodstop>div:nth-child(1){
    width: 34%;
  }
  .goodstop>div:nth-child(2){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(3){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(4){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(5){
    width: 16%;
    text-align: center;
  }
 .goodsbottom{
    width: 96%;  
    height: 104px;
    line-height: 104px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
  }
  .goodsbottom>div:nth-child(1){
    width: 34%;
  }
  .bao{
    display: flex;
  }
  .bao img{
    width: 79px;
    height: 79px;
    padding:12px 0;
  }
  .bao div{
    padding-left: 12px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
  }
  .goodsbottom>div:nth-child(2){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>div:nth-child(3){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>div:nth-child(4){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>img:nth-child(5){
    width: 79px;
    margin: 0 auto;
    padding:12px;
  }
  .zong{
      width: 30%;
      margin-left:70%;
      display: flex;
      height: 25px;
      justify-content: right;
      text-align: right;

  }
  .zong>div:nth-child(1){
    width: 40%;
    text-align: right;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
  }
  .zong>div:nth-child(2){
    width: 30%;
    text-align: right;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
  }
  .zongs{
      padding-top:20px;
      padding-bottom:10px;
  }
  .ying{
    width: 22%;
    padding-left:78%;
    display: flex;
    text-align: right;
    right: 0px;
    align-items: center;
    height: 45px;
    background: #F4F4F4;
  }
  .ying>div:nth-child(1){
    font-size: 16px;
    text-align: right;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #666666;
  }
  .ying>div:nth-child(2){
    font-size: 16px;
    text-align: right;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #E4393C;
  }
  select{
    outline: none;
    width: 915px;
    height: 60px;
    border: 1px solid #9A9A9A;
    font-size: 18px;
    text-align: center;
    margin:10px 25px;
    padding-left:20px;
  }
 textarea{
    outline: none;
    width: 895px;     
    height: 147px;
    border: 1px solid #9A9A9A;
    font-size: 18px;
    margin:10px 25px;
    padding-left:20px;
    padding-top:23px;
  }
  input{
    outline: none;
    width: 895px;   
    border: 1px solid #9A9A9A;
    font-size: 18px;
    margin:10px 25px;
    padding-left:20px;
    padding-top:15px;
    padding-bottom:15px ;
  }
.reason{
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #343434;
  height: 40px;
  line-height: 40px;
  padding-top:20px;
  margin:10px 25px;
}
.reasons{
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #343434;
  height: 40px;
  line-height: 40px;
  margin:10px 25px;
}
.submit{
  width: 24%;
  text-align: center;
  padding:20px 0 30px 0;
  margin-left:76%
}
.submit div{
  width: 199px;
  height: 56px;
  line-height: 56px;
  background: #BE9A68;
  border-radius: 10px; 
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}
</style>